{% extends 'pages/_base.html' %}

{% block _base %}
    {% from 'tools/card.html' import nonModal %}

    {% set body %}
    <form action="#" method="POST">
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" name="title" id="title" class="form-control" placeholder="请输入标题" required>
        </div>

        <div class="form-group">
            <label for="tags">选择标签</label>
        <select name="tags" id="tags" class="form-control" required>
            <option value="交友">交友</option>
            <option value="求助">求助</option>
            <option value="咨询">咨询</option>
            <option value="交易">交易</option>
            <option value="服务">服务</option>
        </select>
        </div>

        <div class="form-group">
            <label>查看权限设置</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="sameRoleOnly" name="sameRoleOnly">
                <label class="form-check-label" for="sameRoleOnly">仅同身份可查看</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="samePartOnly" name="samePartOnly">
                <label class="form-check-label" for="samePartOnly">仅同部门可查看</label>
            </div>
        </div>

        <div class="form-group">
            <label for="editor">内容</label>
           <textarea name="content" id="editor" class="form-control" ></textarea>
        </div>

        {% if not data.Blog or not data.Blog[0].published %}
                <button type="submit" class="btn btn-primary" name="action" value="publish" id="publishbut">发布</button>
            {% elif data.Blog[0].published and not data.Blog[0].checked %}
                <button type="submit" class="btn btn-primary" name="action" value="republish" id="updatebut">修改</button>
            {% elif data.Blog[0].published and data.Blog[0].checked and data.Blog[0].passed %}
                <button type="submit" class="btn btn-danger" name="action" value="delete" id="deletebut">删除</button>
            {% endif %}
    </form>

    <script>
{% if data.Blog[0] %}
    const blogData = {{ data.Blog[0] | tojson }};
{% else %}
    const blogData = {};
{% endif %}

    let title = document.getElementById('title')
    let tags = document.getElementById('tags')
    let publishButton = document.getElementById('publishbut')
    let updateButton = document.getElementById('updatebut')
    let sameRoleOnly = document.getElementById('sameRoleOnly');
    let samePartOnly = document.getElementById('samePartOnly');

function validateForm(editor) {
        if (!title.value.trim()) {
            flash('标题不能为空');
            return false;
        }
        if (!tags.value) {
            flash('请选择标签');
            return false;
        }
        const content = editor.getData().trim();
        if (!content) {
            flash('内容不能为空');
            return false;
        }
        return true;
    }

    EventLoad(()=>{
    title.value = blogData.title || '';
    tags.value = blogData.sort || 'technology';
    sameRoleOnly.checked = blogData.role || false;
    samePartOnly.checked = blogData.part || false;

    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            editor.setData(blogData.content || '');

             Event(updateButton,'click',()=>{
                 if (!validateForm(editor)) return;
                              const data = {
                'title': title.value,
                'sort': tags.value,
                'content': editor.getData(),
                'role': sameRoleOnly.checked,
                'part': samePartOnly.checked
            };

             if (blogData.id){
                 data.id = blogData.id
             }
                 fetchPost('{{ url_for('post.post_my_service_of_publish_blog') }}', data).then((json) => {
                    flash(json.msg);
                })
             })


            Event(publishButton,'click',()=>{
                if (!validateForm(editor)) return;
                             const data = {
                'title': title.value,
                'sort': tags.value,
                'content': editor.getData(),
                 'role': sameRoleOnly.checked,
                'part': samePartOnly.checked
            };

             if (blogData.id){
                 data.id = blogData.id
             }
                fetchPost('{{ url_for('post.post_my_service_of_publish_blog') }}', data).then((json) => {
                    flash(json.msg);
                })
            })
        })
    })


    </script>
    {% endset %}

    {{ nonModal(
        head="内容发布",
        body=body|safe,
        collapse=False
    ) }}
{% endblock %}
